<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多语言旅行助手</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="top-nav">
        <a href="index.html" class="logo">
            <img src="images/vector_25_246.svg" alt="多语言旅行助手品牌标识" height="32">
        </a>
        <div class="nav-actions" style="display: flex; gap: 16px; align-items: center;">
            <div class="language-selector">
                <img src="images/vector_25_458.svg" alt="语言选择图标" width="20" height="20">
                <span>中文简体</span>
            </div>
            <button class="menu-btn">
                <img src="images/vector_25_247.svg" alt="菜单图标" width="24" height="24">
            </button>
        </div>
    </header>

    <!-- 内容区 -->
    <main class="content">
        <!-- 欢迎标题 -->
        <h1 class="welcome-title">欢迎使用多语言旅行助手</h1>
        <!-- 核心功能模块 -->
        <div class="core-modules">
            <div class="module">
                <img src="images/vector_25_435.svg" alt="文本翻译图标">
                <h2>文本翻译</h2>
                <p>使用我们先进的AI翻译引擎，在50多种语言之间进行文本翻译。</p>
                <a href="translation.html" class="module-btn">立即翻译</a>
            </div>
            <div class="module">
                <img src="images/vector_25_442.svg" alt="语音翻译图标">
                <h2>语音翻译</h2>
                <p>自然说话，获得即时语音翻译，实现无障碍对话交流。</p>
                <a href="translation.html?mode=voice" class="module-btn">开始对话</a>
            </div>
            <div class="module">
                <img src="images/vector_25_450.svg" alt="离线模式图标">
                <h2>离线模式</h2>
                <p>下载语言包和地图，在没有网络连接的情况下使用翻译功能。</p>
                <a href="offline-content.html" class="module-btn">管理下载</a>
            </div>
        </div>
        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-item">
                <img src="images/vector_25_369.svg" alt="支持语言图标">
                <h3>50+</h3>
                <p>支持的语言</p>
            </div>
            <div class="stat-item">
                <img src="images/vector_25_373.svg" alt="离线地图图标">
                <h3>200+</h3>
                <p>可用的离线地图</p>
            </div>
        </div>
    </main>

    <!-- 侧边导航栏 -->
    <aside class="side-nav">
        <ul>
            <li>
                <a href="index.html" class="active">
                    <img src="images/vector_25_303.svg" alt="首页图标">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="translation.html">
                    <img src="images/vector_25_310.svg" alt="翻译图标">
                    <span>翻译</span>
                </a>
            </li>
            <li>
                <a href="map.html">
                    <img src="images/vector_25_317.svg" alt="地图图标">
                    <span>地图</span>
                </a>
            </li>
            <li>
                <a href="offline-content.html">
                    <img src="images/vector_25_324.svg" alt="离线内容图标">
                    <span>离线内容</span>
                </a>
            </li>
            <li>
                <a href="settings.html">
                    <img src="images/vector_25_331.svg" alt="设置图标">
                    <span>设置</span>
                </a>
            </li>
        </ul>
    </aside>

    <script src="script.js"></script>
</body>

</html>